<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>龙眠虎计算机 工具系 - 哔哩哔哩</title>
    <link href="css/me.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet">
    <link href="css/login.css" rel="stylesheet">
    <link href="css/address.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <!-- ele 的引入放在vue下面-->
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <script src = 'plug-in/jquery-2.2.0.min.js' type='text/javascript'></script>
    <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.js"></script>
    <script src="js/common.js"></script>
    <script src="js/address.js"></script>
</head>
<body>

<div id="app">
    <common @logined="logined"></common>
    <!-- 背景图与头像 -->
    <div class="profile-headers">
        <div class="profile-header">
            <div class="avatar-wrapper">
                <img :src="userInfo.headimg" class="avatar">
                <h2>{{userInfo.name}}</h2>
                <p>{{userInfo.intro}}</p>
            </div>
        </div>

        <div class="button-box" v-if="location.search.split('=')[1] != myinfo.id">
            <button ref="subscribeBut" @click="subscribe" v-if="myinfo.id == userInfo.id ? false : true" class="button-box-button">关注</button>
            <button class="button-box-button" @click="saveRelationship">发消息</button>
        </div>
        <div class="button-box" v-else>
            <el-dropdown @command="handleCommand">
                <el-button style="width: 100px; height: 30px; display: flex; align-items: center" type="primary">
                    信息管理
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command ="isReSetPasswrod">修改密码</el-dropdown-item>
                    <el-dropdown-item command ="isSetAddress">地址管理</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <button @click="isSetNotice = true" class="button-box-button">公告栏创建</button>
        </div>
    </div>
    <my-address :uid="location.search.split('=')[1]" page="me" ref="myAddress"></my-address>

<!--    // 修改密码弹窗-->
    <el-dialog title="修改密码" :visible.sync="isReSetPasswrod">
        <div class="login-form hidden" id="smsLogin" v-show="isReSetPasswrod" style="display: flex;flex-direction: column;gap: 20px">
            <div class="phone-group">
                <input type="text" class="form-input" placeholder="请输入邮箱" v-model="email">
            </div>
            <div class="code-group">
                <input type="text" class="form-input" v-model="code" placeholder="请输入验证码">
                <button class="get-code-btn" @click="SendCode" ref="getCodeBtn">获取验证码</button>
            </div>
            <div class="phone-group">
                <input type="password" class="form-input" placeholder="请输入新密码" v-model="password"><br>
            </div>
            <div class="phone-group">
                <input type="password" class="form-input" placeholder="请确认密码" v-model="reword">
            </div>
            <button class="login-btn" @click="reSetPassword">修改密码</button>
        </div>
    </el-dialog>

    <el-dialog title="公告栏创建" :visible.sync="isSetNotice">
        <el-form ref="form" :model="noticeForm" label-width="80px">
            <el-form-item label="内容">
                <el-input v-model="noticeForm.contain"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveNotice">立即创建</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>



    <div class="container">
        <!-- 左侧主内容 -->
        <div class="main-content">
            <div class="nav-tabs">
                <div class="nav-item active">
                    <svg width="18" height="18">▶</svg>
                    主页
                </div>
                <div class="nav-item">
                    <svg width="18" height="18">📊</svg>
                    动态
                </div>
                <div class="nav-item">
                    <svg width="18" height="18">📹</svg>
                    投稿
                </div>
                <input type="text" class="search-box" placeholder="搜索视频">
            </div>

            <!-- 代表作 -->
            <div class="video-section">
                <div style="display: flex; justify-content: space-between">
                    <h3 class="section-title">代表作</h3>
<!--                    <a href="" class="section-title" v-if=" hotvideolimit.length > 0 && hotvideolimit" @click.prevent="loadMoreHotVideo">加载更多</a>-->
                </div>
                <div class="video-grid" v-if=" hotvideolimit.length > 0 && hotvideolimit">
                    <div class="video-card" v-for="v in hotvideolimit">
                        <img class="video-thumb" :src="v.image">
                        <div class="video-info">
                            <div class="video-title">{{v.vname}}</div>
                            <div class="video-meta">{{v.vcount > 10000 ? (v.vcount/10000).toFixed(1) + "万" : v.vcount}}播放 · {{v.time.toString().split("T")[0]}}</div>
                        </div>
                    </div>
                    <!-- 更多视频... -->
                </div>
                <el-empty :image-size="200" v-else></el-empty>
            </div >


            <!-- TA的视频 -->
            <div class="video-section" >
                <div style="display: flex; justify-content: space-between">
                    <h3 class="section-title">TA的收藏</h3>
<!--                    <a href="" class="section-title" v-if=" collection.length > 0 && collection" @click.prevent="loadMoreCollectionVideo">加载更多</a>-->
                </div>
                <div class="video-grid" v-if=" collection.length > 0 && collection">
                    <div class="video-card" v-for="c in collection">
                        <img class="video-thumb" :src="c.image">
                        <div class="video-info">
                            <div class="video-title">{{c.vname}}</div>
                            <div class="video-meta">{{c.vcount > 10000 ? (c.vcount/10000).toFixed(1) + "万" : c.vcount}}播放 · {{c.time.toString().split("T")[0]}}</div>
                        </div>
                    </div>
                    <!-- 更多视频... -->
                </div>
                <el-empty :image-size="200" v-else></el-empty>
            </div>


        </div>

        <!-- 右侧边栏 -->
        <div class="sidebar">
            <h3 style="display: flex; justify-content: center">{{userInfo.title}}</h3>
            <br>
            <div class="stats-card">
                <div class="stat-item">
                    <span>播放量</span>
                    <span>{{vcount > 10000 ? (vcount/10000).toFixed(1) + "万" : vcount}}</span>
                </div>
                <div class="stat-item">
                    <span>粉丝数</span>
                    <span>{{fensAndSub.fens > 10000 ? (fensAndSub.fens/10000) + "万" : fensAndSub.fens}}</span>
                </div>
                <div class="stat-item">
                    <span>关注数</span>
                    <span>{{fensAndSub.subs > 10000 ? (fensAndSub.subs/10000) + "万" : fensAndSub.subs}}</span>
                </div>
            </div>

            <div class="notice-board">
                <h3>公告栏</h3>
                <div class="notice-item" v-for="n in notices">
                    {{n.contain}}
                    <div style="text-align: end; font-size: smaller">{{n.time.replace("T", " ")}}</div>
                </div>

            </div>
        </div>
    </div>
</div>

</body>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            myinfo:{},
            userInfo:{},
            hotvideolimit:[],
            vcount: 0,
            fensAndSub:{},
            isReSetPasswrod:false,
            email:"",
            code:"",
            password:"",
            reword:"",
            isSetAddress:false,
            notices: {},
            isSetNotice:false,
            count: 0,
            noticeForm:{
                contain:""
            },
            collection:[],
            hotPage : 1,
            hotSize : 3,
            hotNum : 0,
            collectionPage : 1,
            collectionSize : 6,
            collectionNum : 0,
            isSubscribe: false, // 用户是否对当前up主进行关注
            SubscribeInfo: {}, // 关注的数据
        },
        created() {
            // 获取此页面的用户信息
            axios.get("b-user/search/getUserById"+location.search).then(res=> this.userInfo = res.data)
            //  获取代表作
            this.getHotVideo();
            //获取播放量数据
            axios.get("video/getVcountByUid"+location.search).then(res=> this.vcount = res.data)

            // 获取粉丝数和关注数
            axios.get("b-user/user/getUserFensAndSub"+location.search).then(res=> this.fensAndSub = res.data.data)

            // 获取公告栏
            this.getNotice();
            // 获取收藏
            this.getCollection();
        },
        methods : {
            load () {
                this.count += 2
            },
            logined(myinfo){
                this.myinfo = myinfo
                this.getSubscribeRelation()
            },
            SendCode(){
                if (this.email == null) {
                    return
                }
                if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)) {
                    this.$message("邮箱格式不正确");
                    return
                }
                const button = this.$refs.getCodeBtn;
                let countdown = 60;

                // 禁用按钮并设置样式
                button.disabled = true;
                button.classList.add('disabled');
                button.textContent = `请等待 ${countdown} 秒`;

                const interval = setInterval(() => {
                    countdown--;
                    button.textContent = `请等待 ${countdown} 秒`;

                    if (countdown <= 0) {
                        clearInterval(interval);
                        button.disabled = false;
                        button.classList.remove('disabled');
                        button.textContent = '获取验证码';
                    }
                }, 1000);
                axios.get("b-user/vcode/email", {
                    params: {
                        msgName: "forgetPwd",
                        email: this.email,
                    }
                }).then(res => {
                    if (res.data.code == 1) {
                        this.$message(res.data.msg)
                    }
                })
            },
            reSetPassword(){
                if (this.password != this.reword) {
                    this.$message("两次密码不一致");
                    return
                }
                axios.get("b-user/user/forgetPassword",{
                    params: {
                        email:this.email,
                        code: this.code,
                        password:this.password,
                        id: location.search.split('=')[1]
                    }
                }).then(res => {
                    if (res.data.code == 1) {
                        this.$message(res.data.msg)
                        this.isReSetPasswrod = false
                    }
                })
            },
            handleCommand(command) {
                if (command === "isReSetPasswrod") {
                    this.isReSetPasswrod = true
                }
                if (command === "isSetAddress") {
                    this.$refs.myAddress.dialogVisible = true
                }
            },
            getNotice(){
                axios.get("b-user/notice/getNotice"+location.search).then(res=> this.notices = res.data)
            },
            saveNotice(){
                const notice = {
                    contain:this.noticeForm.contain,
                    uid: location.search.split('=')[1],
                    time: null,
                }
                axios.post("b-user/notice/addNotice",notice).then(res=>{
                    if (res.data.code == 1) {
                        this.$message(res.data.msg);
                        this.isSetNotice = false;
                        this.getNotice()
                    }
                })

            },
            getHotVideo(){
                axios.get("video/getHotVideoByIdLimit", {
                    params: {
                        id: location.search.split('=')[1],
                        page: this.hotPage,
                        limit: this.hotSize,
                    }
                }).then(res=> this.hotvideolimit = res.data)

            },
            getCollection(){
                axios.get("video/getCollection",{
                    params:{
                        id: location.search.split('=')[1],
                        page: this.collectionPage,
                        limit: this.collectionSize,
                    }
                }).then(res=> this.collection = res.data)
            },
            saveRelationship(){
                axios.get("b-user/relationship/saveRelationship",{
                    params:{
                        myid: this.myinfo.id,
                        uid: this.userInfo.id,
                    }
                })
                location.href = 'message.html?id=' + this.userInfo.id
            },
            loadMoreHotVideo(){
                this.hotPage += 1;
                axios.get("video/getHotVideoByIdLimit", {
                    params: {
                        id: location.search.split('=')[1],
                        page: this.hotPage,
                        limit: this.hotSize,
                    }
                }).then(res=> {
                    this.hotvideolimit.push(...res.data)
                })
            },
            loadMoreCollectionVideo(){
                this.collectionPage += 1;
                axios.get("video/getCollection",{
                    params:{
                        id: location.search.split('=')[1],
                        page: this.collectionPage,
                        limit: this.collectionSize,
                    }
                }).then(res=> {
                    this.collection.push(...res.data)
                })
            },
            subscribe(){
                if(this.isSubscribe){
                    // 关注
                    this.isSubscribe = false;
                    axios.get("b-user/reupfens/subscribe", {
                        params:{
                            uid: this.myinfo.id,
                            upid: this.userInfo.id,
                            isSubscribe: this.isSubscribe ? "true": "false"
                        }
                    }).then(res=>{
                        this.$refs.subscribeBut.style.background = "#00AEEC";
                        this.$refs.subscribeBut.textContent = "+ 关注"
                    })
                }else{
                    // 关注
                    this.isSubscribe = true;
                    axios.get("b-user/reupfens/subscribe", {
                        params:{
                            uid: this.myinfo.id,
                            upid: this.userInfo.id,
                            isSubscribe: this.isSubscribe ? "true": "false"
                        }
                    }).then(res=>{
                        // 界面数据渲染
                        this.$refs.subscribeBut.style.background = "gray";
                        this.$refs.subscribeBut.textContent = "已关注"
                    })

                }
            },
            getSubscribeRelation(){
                axios.get("b-user/reupfens/getSubscribeRelation", {
                    params:{
                        uid: this.myinfo.id,
                        upid: this.userInfo.id,
                    }
                }).then(res=>{
                    if(res.data){
                        console.log("已关注")
                        // 界面数据渲染
                        this.SubscribeInfo = res.data
                        this.isSubscribe = true;
                        this.$refs.subscribeBut.style.background = "gray";
                        this.$refs.subscribeBut.textContent = "已关注"
                    }else{
                        this.isSubscribe = false;
                        this.$refs.subscribeBut.style.background = "#00AEEC";
                        this.$refs.subscribeBut.textContent = "+ 关注"
                    }
                })
            },

        }
    })
</script>
</html>